{extend name="main" /}

{block name="body"}
{include file="breadcrumb" /}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">全部</div>
                    <div class="layui-card-body layui-text">
                        <div id="my_chart_all" style="width: 100%;height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">今天</div>
                    <div class="layui-card-body layui-text">
                        <div id="my_chart_today" style="width: 100%;height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">昨天</div>
                    <div class="layui-card-body layui-text">
                        <div id="my_chart_yesterday" style="width: 100%;height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class=" layui-card-header layuiadmin-card-header-auto">
            <form class="layui-form" method="get">
                <input type="hidden" name="bcid" value="{:input('bcid')}"><!--保留当前位置的bcid参数-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="start" value="{$param.start}" class="layui-input" id="start">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="end" value="{$param.end}" class="layui-input" id="end">
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <!-- <div class="layui-card-header">段落统计</div> -->
                    <div class="layui-card-body layui-text">
                        <div id="my_chart" style="width: 100%;height: 450px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script src="/static/admin/js/echarts.js"></script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#start' //指定元素
        });
        laydate.render({
            elem: '#end' //指定元素
        });
    });

    var myChartAll = echarts.init(document.getElementById('my_chart_all'));
    var option_all = {
        title: {
            text: '全部',
            // subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: JSON.parse('{$data_all}'.replace(/&quot;/g,'"')),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChartAll.setOption(option_all);

    var myChartToday = echarts.init(document.getElementById('my_chart_today'));
    var option_today = {
        title: {
            text: '今天',
            // subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: JSON.parse('{$data_today}'.replace(/&quot;/g,'"')),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChartToday.setOption(option_today);

    var myChartYesterday = echarts.init(document.getElementById('my_chart_yesterday'));
    var option_yesterday = {
        title: {
            text: '昨天',
            // subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: JSON.parse('{$data_yesterday}'.replace(/&quot;/g,'"')),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChartYesterday.setOption(option_yesterday);

    var myChart = echarts.init(document.getElementById('my_chart'));
    var data_users = JSON.parse('{$data_users}'.replace(/&quot;/g,'"'));
    var date_list = JSON.parse('{$date_list}'.replace(/&quot;/g,'"'));
    var data = JSON.parse('{$data}'.replace(/&quot;/g,'"'));
    var series = [];
    $(data).each(function(index,obj){
        var value = [];
        for (let i in obj.value){
            value.push(obj.value[i]);
        }
        series.push({
                name: obj.name,
                type: 'line',
                areaStyle: {},
                data: value
            })
    });
    var option = {
        title: {
            text: '段落统计'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: data_users
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: date_list
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: series
    };
    myChart.setOption(option);


</script>
{/block}